<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>guajiang</title>
    <script type="application/javascript" src="../static/lib/vue.js"></script>

</head>
<body>

<div style="width: 200px;height: 300px;" id="hahah">
        你好我的朋友
</div>
<script >
    import {ScratchCard, SCRATCH_TYPE} from '../static/lib/scratchcard.js'

    const scContainer = document.getElementById('js--sc--container')

    // You also can pass HTML Element or a string for querySelector
    // new ScratchCard(htmlElement...

    const sc = new ScratchCard('#hahah', {
        scratchType: SCRATCH_TYPE.SPRAY,
        containerWidth: scContainer.offsetWidth,
        containerHeight: 300,
        imageForwardSrc: '/images/scratchcard.jpg',
        imageBackgroundSrc: '/images/result.png',
        htmlBackground: '<p class="test"><strong>Hello i am HTML content !</strong></p>',
        clearZoneRadius: 50,
        nPoints: 30,
        pointSize: 4,
        enabledPercentUpdate: true, // True by default
        percentToFinish: 50, // enabledPercentUpdate must to be true (true by default)
        callback: function () {
            alert('Now the window will reload !')
            window.location.reload()
        }
    })

    // Init
    sc.init().then(() => {
        sc.canvas.addEventListener('scratch.move', () => {
            let percent = sc.getPercent().toFixed(2)
            console.log(percent)
        })
    }).catch((error) => {
        // image not loaded
        alert(error.message);
    });
</script>
</body>
</html>